<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="接口类型" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="exoServerType">
                            <a-input v-model="model.exoServerType" placeholder="请输入接口类型" readOnly></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="外围系统" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="exoSystemCode">
                            <a-input v-model="model.exoSystemCode" placeholder="请输入系统名"
                                     @click="showExoSystemPop"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="所属单位" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="orgName">
                            <a-input v-model="model.orgName" placeholder="请输入所属单位" disabled></a-input>
                        </a-form-model-item>
                    </a-col>

                    <a-col :span="8">
                        <a-form-model-item label="外围接口" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="exoServerCode">
                            <a-input v-model="model.exoServerCode" placeholder="请输入外系统服务名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="外围接口描述" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="exoServerDesc">
                            <a-input v-model="model.exoServerDesc" placeholder="请输入外围接口描述"></a-input>
                        </a-form-model-item>
                    </a-col>

                    <a-col :span="8">
                        <a-form-model-item label="调用方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wsClientMethod">
                            <j-dict-select-tag v-model="model.wsClientMethod" placeholder="请选择调用方式"
                                               dictCode="msi_ws_client_method" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8" v-if="model.wsClientMethod=='JaxWsProxyFactoryBean'">
                        <a-form-model-item label="客户端ID" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="wsClientId">
                            <a-input v-model="model.wsClientId" placeholder="请输入客户端ID"></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row v-if="model.wsClientMethod=='JaxWsDynamicClientFactory'">
                    <a-col :span="8">
                        <a-form-model-item label="wsdlUrl" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wsWsdlUrl">
                            <a-input v-model="model.wsWsdlUrl" placeholder="请输入URL"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="接口方法名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wsServiceMethod">
                            <a-input v-model="model.wsServiceMethod" placeholder="请输入接口方法名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="用户名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wsUsername">
                            <a-input v-model="model.wsUsername" placeholder="请输入用户名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wsPassword">
                            <a-input type="password" v-model="model.wsPassword" placeholder="请输入密码"></a-input>
                        </a-form-model-item>
                    </a-col>

                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="入参列表" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wsRequestParams">
                            <a-input v-model="model.wsRequestParams" placeholder="请输入入参列表"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="出参列表" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wsResponseParams">
                            <a-input v-model="model.wsResponseParams" placeholder="请输入出参列表"></a-input>
                        </a-form-model-item>
                    </a-col>

                </a-row>
                <a-row>
                    <!--<a-col :span="8">
                        <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
                            <a-input v-model="model.status" placeholder="请输入状态" readOnly></a-input>
                        </a-form-model-item>
                    </a-col>-->
                    <a-col :span="8">
                        <a-form-model-item label="测试任务名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskName">
                            <a-input v-model="model.taskName" placeholder="请输入测试任务名"></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="请求数据" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
                                           prop="requestText">
                            <a-textarea v-model="model.requestText" rows="5" placeholder="请输入请求数据"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="响应数据" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
                                           prop="responseText">
                            <a-textarea v-model="model.responseText" rows="5" placeholder="请输入响应数据"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>

            </a-form-model>
            <msi-exo-system-list-pop ref="exoSystemPop" @ok="exoSystemPopOk"></msi-exo-system-list-pop>
        </j-form-container>
    </a-spin>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import MsiExoSystemListPop from '../plugins/MsiExoSystemListPop'

  export default {
        name: 'MsiExoServerWsForm',
        components: {MsiExoSystemListPop},
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                model: {
                    exoServerType: 'WS', wsClientMethod: 'client', status: '1'
                },
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                labelCol2: {
                    xs: { span: 24 },
                    sm: { span: 3 },
                },
                wrapperCol2: {
                    xs: { span: 24 },
                    sm: { span: 18 },
                },
                confirmLoading: false,
                validatorRules: {
                    exoSystemCode: [
                        { required: true, message: '请输入系统名!' },
                    ],
                    exoServerType: [
                        { required: true, message: '请输入接口类型!' },
                    ],
                    exoServerCode: [
                        { required: true, message: '请输入外系统服务名!' },
                    ],
                    exoServerDesc: [
                        { required: true, message: '请输入外系统服务描述!' },
                    ],
                    wsClientMethod: [
                        { required: true, message: '请输入客户端类型!' },
                    ],

                },
                url: {
                    add: '/msibase/msiExoServer/add',
                    edit: '/msibase/msiExoServer/edit',
                    test: '/msibase/msiExoServer/testExoServer',
                }
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
        },
        created() {
            //备份model原始值
            this.modelDefault = JSON.parse(JSON.stringify(this.model))
        },
        methods: {
            add() {
                this.edit(this.modelDefault)
            },
            edit(record) {
                this.model = Object.assign({}, record)
                this.visible = true
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
            showExoSystemPop() {
                this.$refs.exoSystemPop.title = '外围系统服务选择'
                this.$refs.exoSystemPop.hide()
            },
            exoSystemPopOk(rows) {
                let row = rows[0]
                this.model = Object.assign({}, this.model, {
                    exoSystemId: row.id,
                    exoSystemCode: row.exoSystemCode,
                    exoSystemName: row.exoSystemName,
                    orgCode: row.orgCode,
                    orgName: row.orgName,
                })
            },
            test(){
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = this.url.test
                        let method = 'post'
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message? res.message : '测试成功')
                                //that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            }
        }
    }
</script>
